<template>
  <div ref="chart" style="height: 100%;"></div>
</template>
<script>
import { Liquid } from '@antv/g2plot';
export default {
  /*
  total:    数据总数
  x:        要传输的数据
  color:    图表颜色(默认为#00E4FF)
  text:     图表中的文字
*/
  name: 'Liquid',
  props: {
    total: {
      type: Number,
      required: true
    },
    x: {
      type: Number,
      required: true
    },
    color: {
      type: Array,
      default: () => ['#00E4FF']
    },
    text: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      chart: null
    };
  },
  mounted() {
    this.drawChart();
  },
  watch: {
    total() {
      this.updateData();
    },
    x() {
      this.updateData();
    }
  },
  methods: {
    drawChart() {
      const ref = this.$refs.chart;
      const ratio = window.ratio || 1;
      const percent = this.total ? this.x / this.total : 0;
      // 字体自适应
      const font1 = ref.clientWidth / ratio > 110 ? '1.125rem' : '.875rem';
      const font2 = ref.clientWidth / ratio > 110 ? '.875rem' : '.75rem';
      this.chart = new Liquid(ref, {
        radius: 1,
        percent,
        outline: {
          border: 6 * ratio,
          distance: 0 * ratio
        },
        color: this.color[0],
        wave: {
          length: 40 * ratio,
          count: 3
        },
        statistic: {
          content: {
            customHtml: (container, view, { percent }) => {
              const number = `${(percent * 100).toFixed((percent * 100) % 1 === 0 ? 0 : 1)}`;
              const text = this.text;
              return `
              <div>
                <div style="color: #FFFFFF; font-family: Helvetica-regular; display: flex; align-items: center; justify-content: center;  line-height: 1.5rem; padding:2px;">
                  <div style="font-size: ${font1};">${number}</div>
                  <div style="font-size: 0.75rem; margin-left: 0.25rem; margin-top: 0.125rem;">%</div>
                </div>
                <div style="color: #FFFFFF; font-family: Helvetica-regular; font-size: ${font2}; line-height: 1rem; margin-top">${text}</div>
              </div>
              `;
            }
          }
        }
      });
      this.chart.render();
    },
    updateData() {
      const ref = this.$refs.chart;
      const ratio = window.ratio || 1;
      const percent = this.x / this.total;
      // 字体自适应
      const font1 = ref.clientWidth / ratio > 110 ? '1.125rem' : '.875rem';
      const font2 = ref.clientWidth / ratio > 110 ? '.875rem' : '.75rem';
      this.chart.update({
        radius: 1,
        percent,
        outline: {
          border: 6 * ratio,
          distance: 0 * ratio
        },
        color: this.color[0],
        wave: {
          length: 40 * ratio,
          count: 3
        },
        statistic: {
          content: {
            customHtml: (container, view, { percent }) => {
              const number = `${(percent * 100).toFixed((percent * 100) % 1 === 0 ? 0 : 1)}`;
              const text = this.text;
              return `
              <div>
                <div style="color: #FFFFFF; font-family: Helvetica-regular; display: flex; align-items: center; justify-content: center;  line-height: 1.5rem;">
                  <div style="font-size: ${font1};">${number}</div>
                  <div style="font-size: 0.75rem; margin-left: 0.25rem; margin-top: 0.125rem;">%</div>
                </div>
                <div style="color: #FFFFFF; font-family: Helvetica-regular; font-size: ${font2}; line-height: 1rem; margin-top">${text}</div>
              </div>
              `;
            }
          }
        }
      });
    }
  },
  beforeDestroy() {
    this.chart?.destroy();
  }
};
</script>
